<template>
  <div
    class="relative flex flex-col w-full"
    :class="[
      'mt-' + (infoComponent.extension.topMargin && infoComponent.extension.topMargin.value),
      'mr-' + (infoComponent.extension.rightMargin && infoComponent.extension.rightMargin.value),
      'mb-' + (infoComponent.extension.bottomMargin && infoComponent.extension.bottomMargin.value),
      'ml-' + (infoComponent.extension.leftMargin && infoComponent.extension.leftMargin.value),
    ]"
  >
    <div
      class="h-full"
      :style="{
        '--color': infoComponent.extension.color.value,
        '--width': `${infoComponent.extension.width.value}px`,
        '--height': `${infoComponent.extension.height.value}px`,
        '--font-size': `${infoComponent.extension.fontSize.value}px`,
        '--radius': `${infoComponent.extension.bradius.value}px`,
        '--lineWeight': `${infoComponent.extension.lineWeight.value}px`,
        '--lunWeight2': `${infoComponent.extension.lunWeight.value * 2 - 1}px`,
        '--lunWeight': `${infoComponent.extension.lunWeight.value}px`,
        display: 'flex',
        justifyContent: infoComponent.extension.posi.value,
      }"
    >
      <div style="position: relative">
        <div :style="`display: flex`">
          <div
            v-for="(item, index) in infoComponent.extension.radioList.value"
            :key="index"
            class="div1"
            :style="`color:${index == getIndex ? '#FFF' : infoComponent.extension.color.value}`"
            @click="chooseRadio(item)"
          >
            {{ item.name }}
          </div>
        </div>
        <div
          class="active"
          :style="{
            left: getIndex ? getIndex * infoComponent.extension.width.value + 'px' : getIndex * infoComponent.extension.width.value + 3 + 'px',
          }"
        >
          <span
            class="l_left"
            :style="{
              left: `${infoComponent.extension.leftPosi.value}px`,
              bottom: `-${infoComponent.extension.lunWeight.value}px`,
              height: `${infoComponent.extension.lunWeight.value}px`,
            }"
          ></span>
          <span
            class="l_right"
            :style="{
              right: `${infoComponent.extension.rightPosi.value}px`,
              bottom: `-${infoComponent.extension.lunWeight.value}px`,
              height: `${infoComponent.extension.lunWeight.value}px`,
            }"
          ></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  export default defineComponent({
    name: 'UiRadioGroup',
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        infoComponent: {},
      }
    },
    computed: {
      getIndex() {
        return this.infoComponent.extension.radioList.value.findIndex((cur) => cur.value == this.infoComponent.extension.defaultValue.value)
      },
    },
    watch: {
      info: {
        handler(val) {
          this.infoComponent = cloneDeep(val)
        },
        deep: true,
      },
    },
    created() {
      this.infoComponent = cloneDeep(this.info)
    },
    mounted() {},
    methods: {
      chooseRadio(item) {
        this.infoComponent.extension.defaultValue.value = item.value
      },
    },
  })
</script>
<style lang="scss" scoped>
  .uiRadioGroup {
    width: 100%;
    /* overflow: hidden; */
  }
  .div1 {
    font-size: var(--font-size);
    color: var(--color);
    border-top: var(--lineWeight) solid var(--color);
    border-bottom: var(--lineWeight) solid var(--color);
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--width);
    height: var(--height);
    z-index: 2;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
    user-select: none;
  }
  .div1:nth-child(1) {
    border-left: var(--lineWeight) solid var(--color);
    border-radius: var(--radius) 0 0 var(--radius);
  }
  .div1:last-child {
    border-right: var(--lineWeight) solid var(--color);
    border-radius: 0 var(--radius) var(--radius) 0;
  }
  .active {
    background: var(--color);
    position: absolute;
    top: var(--lunWeight);
    z-index: 1;
    width: calc(var(--width) - 3px);
    height: calc(var(--height) - var(--lunWeight2));
    border-top: var(--lineWeight) solid var(--color);
    border-bottom: var(--lineWeight) solid var(--color);
    transition: all 0.5s;
    border-radius: var(--radius);
    span {
      width: 8px;
      height: 3px;
      background: var(--color);
      position: absolute;
    }
    .l_left {
      bottom: -3px;
      left: 8px;
    }
    .l_right {
      bottom: -3px;
      right: 8px;
    }
  }
</style>
